<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>4-2</title>
  <script src='vue/vue.js'></script>
</head>

<body>
  <div id="root">
    <counter :count2='0' @change="handleChange"></counter>
    <!-- 只写count，里面是数字；:count里面是js表达式 -->
    <counter :count2='1' @change="handleChange"></counter>
    <div>{{total}}</div>
  </div>
  <script>
    var counter = {
      // props: ['count'], //父组件向子组件传值
      props: {
        // count: Number //注意大小写
        // count: [Number,String]
        count2: {
          type: Number,
          required: true,
          default: 10
        }
      },
      data: function () {
        console.log(this) // 这儿的this是组件的实例
        return {
          number: this.count2
        }
      },
      template: "<div @click='handleClick'>{{number}}</div>",
      methods: {
        handleClick: function () {
          this.number++
          this.$emit('change', 1) // 子组件向父组件传值
        }
      }
    }
    var vm = new Vue({
      el: "#root",
      components: {
        counter: counter
      },
      data: {
        total: 1
      },
      methods: {
        handleChange: function (num) {
          console.log(num)
          this.total = this.total + num
        }
      }
    })
  </script>
</body>

</html>